<template>
    <div>
        <!--只有一些css样式引用-->
        <lab_head />
        <!--页头部导航-->
        <lab_header />
        <div class="total_count">全部商品<em>{{ total_count }}</em>件</div>
        <ul class="cart_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
            <li class="col06">操作</li>
        </ul>
        <ul class="cart_list_td clearfix" v-for="(sku, index) in cart" :key="index">
            <li class="col01"><input type="checkbox" name="" v-model="sku.selected" @change="update_selected(index)"></li>
            <li class="col02"><img :src="sku.url"></li>
            <li class="col03">{{ sku.title }}</li>
            <li class="col05">{{ sku.price }}元</li>
            <li class="col06">
                <div class="num_add">
                    <a @click="on_add(sku.id)" class="add fl">+</a>
                    <input v-model="sku.count" @focus="origin_input = sku.count" @blur="on_input(index)" type="text"
                        class="num_show fl">
                    <a @click="on_minus(sku.id)" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">{{ sku.amount }}元</li>
            <li class="col08"><a @click="on_delete(sku.id)">删除</a></li>
        </ul>

        <ul class="settlements">
            <li class="col01"><input type="checkbox" name="" @change="on_selected_all" v-model="selected_all"></li>
            <li class="col02">全选</li>
            <li class="col03">
                合计(不含运费)：<span>¥</span><em>{{ total_selected_amount }}</em><br>共计<b>{{ total_selected_count }}</b>件商品</li>
            <li class="col04"><a @click="settlement()">去结算</a></li>
        </ul>
        <lab_footer />
    </div>
</template>

<script>
import lab_head from './common/lab_head';
import lab_header from './common/lab_header';
import lab_footer from './common/lab_footer';
export default {
    data() {
        return {
            cart:[],
            userid: localStorage.getItem('userid'),
            year: '',
        }
    },
    methods: {
        getgwc() {
            this.axios.get('/getcourse?userid='+this.userid).then(res => {
                if (res.data.code == 200) {
                    
                    this.cart = res.data.data
                }
            })
        },
        on_add(id) {
            this.axios.post('/addcount', { userid:this.userid,id:id})
                .then(res => {
                    if (res.data.code == 200) {
                        alert(res.data.msg)
                        this.getgwc()
                }
            })
        },
        on_minus(id) {
            this.axios.post('/mincount', { userid:this.userid,id:id })
                .then(res => {
                    if (res.data.code == 200) {
                        alert(res.data.msg)
                        this.getgwc()
                    }
                })
        },
        on_delete(id) {
            this.axios.post('/delcount', { userid: this.userid, id: id })
                .then(res => {
                    if (res.data.code == 200) {
                        alert(res.data.msg)
                        this.getgwc()
                    }
                })
        },
        settlement() {
            var userid = localStorage.getItem('userid')
            this.axios.post('/settlement', {'userid': userid }).then(res => {
                if (res.data.code == 200) {
                    window.location.href = res.data.url
                }
            })
        }
    },
    mounted() {
        this.getgwc()
    },
    //定义组建标签
    components: {
        lab_head,
        lab_header,
        lab_footer,
    },

}
</script>

<style>
.total_count {
    width: 1200px;
    margin: 0 auto;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}

.total_count em {
    font-size: 16px;
    color: #ff4200;
    margin: 0 5px;
}

.cart_list_th {
    width: 1198px;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
    margin: 0 auto;
}

.cart_list_th li {
    height: 40px;
    line-height: 40px;
    float: left;
    text-align: center;
}

.cart_list_th .col01 {
    width: 36%;
}

.cart_list_th .col02 {
    width: 6%;
}

.cart_list_th .col03 {
    width: 13%;
}

.cart_list_th .col04 {
    width: 12%;
}

.cart_list_th .col05 {
    width: 15%;
}

.cart_list_th .col06 {
    width: 18%;
}

.cart_list_td {
    width: 1198px;
    border: 1px solid #ddd;
    background-color: #fff9f9;
    margin: 0 auto;
    margin-top: -1px;
}

.cart_list_td li {
    height: 120px;
    line-height: 120px;
    float: left;
    text-align: center;
}

.cart_list_td .col01 {
    width: 4%;
}

.cart_list_td .col02 {
    width: 12%;
}

.cart_list_td .col03 {
    width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cart_list_td .col04 {
    width: 6%;
}

.cart_list_td .col05 {
    width: 13%;
}

.cart_list_td .col06 {
    width: 12%;
}

.cart_list_td .col07 {
    width: 15%;
}

.cart_list_td .col08 {
    width: 18%;
}

.cart_list_td .col02 img {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    display: block;
    margin: 10px auto 0;
}

.cart_list_td .col03 {
    height: 48px;
    text-align: left;
    line-height: 24px;
    margin-top: 38px;
}

.cart_list_td .col03 em {
    color: #999
}

.cart_list_td .col08 a {
    color: #666
}

.cart_list_td .col06 .num_add {
    width: 98px;
    height: 28px;
    border: 1px solid #ddd;
    margin: 40px auto 0;
}

.cart_list_td .col06 .num_add a {
    width: 29px;
    height: 28px;
    line-height: 28px;
    background-color: #f3f3f3;
    font-size: 14px;
    color: #666
}

.cart_list_td .col06 .num_add input {
    width: 38px;
    height: 28px;
    text-align: center;
    line-height: 30px;
    border: 0px;
    display: block;
    float: left;
    outline: none;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}


.settlements {
    width: 1198px;
    height: 78px;
    border: 1px solid #ddd;
    background-color: #fff4e8;
    margin: -1px auto 0;
}

.settlements li {
    line-height: 78px;
    float: left;
}

.settlements .col01 {
    width: 4%;
    text-align: center
}

.settlements .col02 {
    width: 12%;
}

.settlements .col03 {
    width: 69%;
    height: 48px;
    line-height: 28px;
    text-align: right;
    margin-top: 10px;
}

.settlements .col03 span {
    color: #ff0000;
    padding-right: 5px
}

.settlements .col03 em {
    color: #ff3d3d;
    font-size: 22px;
    font-weight: bold;
}

.settlements .col03 span {
    color: #ff0000;
}

.settlements .col03 b {
    color: #ff0000;
    font-size: 14px;
    padding: 0 5px;
}

.settlements .col04 {
    width: 14%;
    text-align: center;
    float: right;
}

.settlements .col04 a {
    display: block;
    height: 78px;
    background-color: #ff3d3d;
    text-align: center;
    line-height: 78px;
    color: #fff;
    font-size: 24px
}


.common_title {
    width: 1200px;
    margin: 20px auto 0;
    font-size: 14px;
}

.common_list_con {
    width: 1200px;
    border: 1px solid #dddddd;
    border-top: 2px solid #e3101e;
    margin: 10px auto 0;
    background-color: #f7f7f7;
    position: relative;
}

.common_list_con dl {
    margin: 20px;
}

.common_list_con dt {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px
}

.common_list_con dd {
    margin-bottom: 10px;
}

.common_list_con dd.current {
    font-size: 14px;
    font-weight: bold;
}

.common_list_con dd input {
    vertical-align: bottom;
    margin-right: 10px
}

.edit_site {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 100px;
    height: 30px;
    background-color: #fe0000;
    text-align: center;
    line-height: 30px;
    color: #fff
}

.pay_style_con {
    margin: 20px;
}

.pay_style_con input {
    float: left;
    margin: 14px 7px 0 0;
}

.pay_style_con label {
    float: left;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px 10px 10px 40px;
    margin-right: 25px
}

/* 把标签默认的间距设为0 */
body,
ul,
ol,
p,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dd,
select,
input,
textarea,
form {
    margin: 0;
    padding: 0
}

/* 让h标签文字大小继承body的文字设置 */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

/* 去掉列表默认的图标 */
ul,
ol {
    list-style: none;
}

/* 去掉em默认的斜体 */
em {
    font-style: normal;
}

/* 去掉a标签默认的下划线 */
a {
    text-decoration: none;
}


/* 去掉加链接时产生的框线 */
img {
    border: 0;
}

/* 清除浮动 */
.clearfix:before,
.clearfix:after {
    content: "";
    display: table
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1
}

/* 浮动 */
.fl {
    float: left
}

.fr {
    float: right
}</style>